<template>
	<view>
		<view class="Supplement">
			已有6523515人完成该项信息后成功下款
		</view>
		<view class="SupplementHead" @click="SupplementClick(1)">
			<text style="float: left;margin-right: 40rpx;">负债情况</text>
			<!-- <picker @change="bindPickerChange" :value="index" :range="list">
			    <view class="uni-input">{{list[index].label}}</view>
			</picker> -->
			<text style="position: absolute;right:100rpx;">{{liabilities}}</text>
			<lb-picker @confirm="HandleConfirmMarriage" ref="Supplement1" :list="liabilitiesList"></lb-picker>
			<image src="../../static/bottom.png" class="SupplementHeadImg" mode=""></image>
		</view>
		<view class="SupplementHead" @click="SupplementClick(2)">
			<text style="float: left;margin-right: 40rpx;">职业类型</text>
			<text style="position: absolute;right:100rpx;">{{occupation}}</text>
			<lb-picker @confirm="HandleConfirmMarriage2" ref="Supplement2" :list="occupationList"></lb-picker>
			<image src="../../static/bottom.png" class="SupplementHeadImg" mode=""></image>
		</view>
		<view class="SupplementHead">
			<text>公司电话</text>
			<input type="text" value="" v-model="company_phone" style="text-align: right;margin-left: 80rpx;" class="SupplementHeadInput" placeholder="区号-请填电话或者手机号" />
		</view>
		<view class="SupplementHead" @click="SupplementClick(3)">
			<text style="float: left;margin-right: 40rpx;">住宅情况</text>
			<text style="position: absolute;right:100rpx;">{{residence_info}}</text>
			<lb-picker @confirm="HandleConfirmMarriage3" ref="Supplement3" :list="residence_infoList"></lb-picker>
			<image src="../../static/bottom.png" class="SupplementHeadImg" mode=""></image>
		</view>
		<view class="SupplementHead" @click="SupplementClick(4)">
			<text style="float: left;margin-right: 40rpx;">所属行业</text>
			<text style="position: absolute;right:100rpx;">{{industry}}</text>
			<lb-picker @confirm="HandleConfirmMarriage4" ref="Supplement4" :list="industryList"></lb-picker>
			<image src="../../static/bottom.png" class="SupplementHeadImg" mode=""></image>
		</view>
		<view class="SupplementHead">
			<text>公积金</text>
			<input type="text" value="" v-model="accumulation" class="SupplementHeadInput" style="padding-left: 100rpx;text-align: right;" placeholder="请填写公积金" />
			<text style="margin-left: 20rpx;">元</text>
		</view>
		<view class="SupplementHead">
			<text>月收入(元)</text>
			<input type="text" value="" v-model="monthly_income" class="SupplementHeadInput" style="padding-left: 46rpx;text-align: right;" placeholder="请输入月收入(元)" />
			<text style="margin-left: 20rpx;">元</text>
		</view>
		<view class="SupplementHead" style="margin-top: 20rpx;" @click="SupplementClick(5)">
			<text style="float: left;margin-right: 100rpx;">借款理由</text>
			<text style="position: absolute;right:100rpx;">{{borrowing}}</text>
			<lb-picker @confirm="HandleConfirmMarriage5" ref="Supplement5" :list="borrowingList"></lb-picker>
			<image src="../../static/bottom.png" class="SupplementHeadImg" mode=""></image>
		</view>
		<view class="SupplementBottom">
			<view class="SupplementBottomInput" @click="TiJiaoClick()">
				提交
			</view>
			<view style="font-size: 24rpx;font-family: PingFang SC;font-weight: 400;color: #888888;text-align: center;margin-top: 20rpx;">
				信息仅用做审批借款额度，将加密保障您的信息安全
			</view>
		</view>
	</view>
</template>
<script>

	import LbPicker from '@/components/lb-picker'
	import {VUE_API_URL} from "@/components/pulugins/index"
	export default {
		components: {
			LbPicker
		},
		computed: {
		    startDate() {
		        return this.getDate('start');
		    },
		    endDate() {
		        return this.getDate('end');
		    }
		},
		data() {
			return {
				liabilitiesList:'',		//负债情况
				token:'',
				industry:'',			//行业类型
				industryList:'',		//所属行业
				residence_infoList:'',  //住宅类型
				residence_info:'',		//住宅类型
				borrowingList:'',		//贷款理由
				monthly_income:'',		//月收入
				accumulation:'',		//	公积金
				occupation:'',			//职业
				company_phone:'',		//公司电话
				borrowing:'',			//借款理由
				liabilities:'',			//负债情况
				list:[
					{occupation:''},
					{industry:''},
					{borrowing:''},
					{liabilities:''}
				],
			}
		},
		onShow() {
			var that = this;
			that.token = uni.getStorageSync('token');
			this.premise();
		},
		onLoad() {},
		mounted() {},
		methods: {
			TiJiaoClick(){			//提交
				var that = this;
				console.log(that.list)
				if(that.monthly_income == ''){
					uni.showToast({
					    title: '请输入月收入',
						icon:'none',
					    duration: 2000
					});
				}else if(that.accumulation == ''){
					uni.showToast({
					    title: '请输入公积金',
						icon:'none',
					    duration: 2000
					});
				}else if(that.occupation == ''){
					uni.showToast({
					    title: '请选择职业',
						icon:'none',
					    duration: 2000
					});
				}else if(that.company_phone == ''){
					uni.showToast({
					    title: '请输入公司电话',
						icon:'none',
					    duration: 2000
					});
				}else if(that.industry == ''){
					uni.showToast({
					    title: '请选择行业',
						icon:'none',
					    duration: 2000
					});
				}else if(that.borrowing == ''){
					uni.showToast({
					    title: '请选择借款理由',
						icon:'none',
					    duration: 2000
					});
				}else if(that.liabilities == ''){
					uni.showToast({
					    title: '请选择负债状态',
						icon:'none',
					    duration: 2000
					});
				}else if(that.residence_info == ''){
					uni.showToast({
					    title: '请选择住宅情况',
						icon:'none',
					    duration: 2000
					});
				}else{
					uni.request({
					    url: VUE_API_URL + 'user/submit', 
						method:'POST',
					    data: {
					        type:3,
							monthly_income:that.monthly_income,
							accumulation:that.accumulation,
							occupation:that.list[0].occupation,
							company_phone:that.company_phone,
							industry:that.list[1].industry,
							borrowing:that.list[2].borrowing,
							liabilities:that.list[3].liabilities
					    },
					    header: {
					        'Authori-zation': 'Bearer ' + that.token //自定义请求头信息
					    },
					    success: (res) => {
							console.log(res)
							uni.showToast({
							    title: res.data.msg,
								icon:'none',
							    duration: 2000
							});
					    }
					});	
				}
			},
			SupplementClick(index){
				if(index == 1){
					this.$refs.Supplement1.show() // 显示
				}else if(index == 2){
					this.$refs.Supplement2.show() // 显示
				}else if(index == 3){
					this.$refs.Supplement3.show() // 显示
				}else if(index == 4){
					this.$refs.Supplement4.show() // 显示
				}else if(index == 5){
					this.$refs.Supplement5.show() // 显示
				}
			},
			premise(){
				var that = this;
				that.token = uni.getStorageSync('token');
				uni.request({
				    url: VUE_API_URL + 'premise', 
					method:'POST',
				    data: {},
				    header: {
				        'Authori-zation': 'Bearer ' + that.token //自定义请求头信息
				    },
				    success: (res) => {
						console.log(res.data.data);
						let data = res.data.data;
						that.liabilitiesList = data.liabilities;			//负债情况
						that.industryList = data.industry;					//所属行业
						that.residence_infoList = data.residence_info;		//住宅情况
						that.borrowingList = data.borrowing;				//贷款理由
						that.occupationList = data.occupation;				//职业类型
				    }
				});	
			},
			HandleConfirmMarriage(e){		//负债情况
				var that = this;
				that.liabilities = e.item.label
				that.list[3].liabilities =  e.item.value;
				console.log(e);
			},
			HandleConfirmMarriage2(e){		//职业类型
				var that = this;
				that.occupation = e.item.label
				that.list[0].occupation =  e.item.value;
				console.log(e);
			},
			HandleConfirmMarriage3(e){		//住宅情况
				var that = this;
				that.residence_info = e.item.label
				// that.list[6].residence_info =  e.item.value;
				console.log(e);
			},
			HandleConfirmMarriage4(e){		//所属行业
				var that = this;
				that.industry = e.item.label
				that.list[1].industry =  e.item.value;
				console.log(e);
			},
			HandleConfirmMarriage5(e){		//用途
				var that = this;
				that.borrowing = e.item.label
				that.list[2].borrowing =  e.item.value;
				console.log(e);
			},
			companyPhone(e){
				var that = this;
				that.companyPhoneValue = e.target.value;
			},
			accumulationFund(e){
				var that = this;
				that.accumulationFundValue = e.target.value;
			},
			monthlyIncome(e){
				var that = this;
				that.monthlyIncomeValue = e.target.value;
			},
			AddUserInforSubmit(){
				var that = this;
				// uni.request({
				//     url: VUE_API_URL + 'user/submit', 
				// 	method:'POST', 
				//     data: {
				//         type:3,
				// 		monthly_income:that.monthlyIncomeValue,		//月收入
				// 		accumulation:that.accumulationFundValue,	//公积金
				// 		occupation:this.index4,		                //职业
				// 		company_phone:that.companyPhoneValue,	    //公司电话
				// 		industry:this.index3,		                //行业类型
				// 		borrowing:this.index2,	 	                //借款理由
				// 		liabilities:this.index,	                    //负债情况
				//     },
				//     header: {
				//         'Authori-zation': 'Bearer ' + uni.getStorageSync('token') //自定义请求头信息
				//     },
				//     success: (res) => {
				// 		console.log(res)
				// 		uni.showToast({
				// 		    title: res.data.msg,
				// 			icon:'none',
				// 		    duration: 2000
				// 		});
				//     }
				// });	
			},
			
		},
	}
</script>
<style>
	.SupplementBottomInput{
		width: 650rpx;
		height: 95rpx;
		background: linear-gradient(-84deg, #DFBA94, #DFAE7C);
		box-shadow: 1rpx 3rpx 10rpx 0px rgba(0, 0, 0, 0.16);
		border-radius: 48rpx;
		margin: auto;
		text-align: center;
		line-height: 95rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}
	.SupplementBottom{
		width: 100%;
		background: #FFFFFF;
		margin-top: 70rpx;
		padding-top: 20rpx;
	}
	page{
		background: #F8F8F8;
	}
	.SupplementHeadInput{
		display: inline-block;
		width: 400rpx;
		position: relative;
		top: 12rpx;
		padding-left: 40rpx;
	}
	.SupplementHeadImg{
		width: 33rpx;
		height: 18rpx;
		float: right;
		position: absolute;
		top: 40rpx;
		right: 50rpx;
		/* top: 40rpx; */
	}
	.SupplementHead{
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		padding: 0 50rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #F8F8F8;
		background: #FFFFFF;
		position: relative;
	}
	.Supplement{
		width: 100%;
		height: 50rpx;
		background: #FBE4CE;
		padding-left: 28rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #DFAF7F;
		line-height: 50rpx;
	}
</style>
